<template>
  <div class="picking-order">
    <a-spin :spinning="loading">
      <a-form :model="formState" ref="formDataRef" name="basic" autocomplete="off">
        <a-row>
          <a-col :span="6">
            <a-form-item label="拣货仓库" name="warehouseId" :rules="[{ required: true, message: '请选择拣货仓库!' }]">
              <a-select v-model:value="formState.warehouseId" placeholder="请选择" :options="getWarehouseOpts" :field-names="{ label: 'cnName', value: 'id' }"> </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <XlsxTable :columns="xlsxColumn" :colWidths="colWidths" :minRows="tableData.length" :showButton="false" :table-data="tableData" :config="{ height: '500px', ...conifg }"></XlsxTable>
    </a-spin>
    <div class="operation-btn-wrapper">
      <a-button v-debounce @click="submitHandle" :loading="loading" type="primary">保 存</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { xlsxColumn, colWidths } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { getBoxInfoByIdApi } from "@/api/waybillManagement/stockManagement";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: StockManagement.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData } = toRefs(props);
const { formState, conifg, loading, tableData, getWareHouseHandle, getWarehouseOpts, formDataRef } = InitHook();
const { submitHandle, cancelHandle } = OperationHook({ formState, emit, loading, tableData, formDataRef, getWarehouseOpts });

const init = () => {
  loading.value = true;
  return getBoxInfoByIdApi(passData.value.id)
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data || [];
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
init();
getWareHouseHandle();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
      getWareHouseHandle();
    } else {
      tableData.value = [];
      formState.warehouseId = "";
    }
  }
);
</script>
<style lang="stylus" scoped>
.picking-order{
    background-color: #fff;
    padding: 0 12px 62px 12px;
    .operation-btn-wrapper{
        position: absolute;
        z-index: 9999;
        width: 100%;
        background-color: #fff;
        text-align: center;
        left: 0;
        right: 0;
        padding: 12px 0;
        bottom: 0;
        :deep(.ant-btn){
            margin-right: 16px;
        }
    }
}
</style>
